<template>
  <el-dialog :title="$t('gen.syncBtn')" v-model="visible" width="600" :close-on-click-model="false" draggable >
      <el-form ref="dataFormRef" :model="state.queryForm" v-loading="state.loading">
          <el-row :gutter="20">
              <el-col :span="12" class="mb20">
                <el-form-item :label="$t('table.dataSourceName')" prop="dsName">
                  <el-select @change="getDataList" :placeholder="$t('table.inputdataSourceNameTip')" v-model="state.queryForm.dsName">
                    <el-option label="默认数据源" value="master"></el-option>
                    <el-option :key="ds.dsId" :label="ds.name" :value="ds.name" v-for="ds in datasourceList"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="mb20">
                <el-form-item :label="$t('table.tableName')" prop="tableName">
                  <el-input :placeholder="$t('table.inputtableNameTip')" clearable v-model="state.queryForm.tableName">
                  </el-input>
              </el-form-item>
              </el-col>
          </el-row>
          <el-row :gutter="20">
            <span class="dialog-footer" style="float: right;">
              <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
              <el-button @click="getDataList" > {{ $t('common.queryBtn') }} </el-button>  
              <el-button @click="syncTable(selectObjs)">{{ $t('gen.syncBtn') }}</el-button>
            </span>
          </el-row>
      </el-form>
    <!--显示表格数据-->
      <el-table :data="state.dataList" style="w100" v-loading="state.loading"
      border :cell-style="tableStyle.cellStyle"
      :header-cell-style="tableStyle.headerCellStyle"
      @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="40" />
        <!-- <el-table-column :label="t('table.index')" type="index" width="60" /> -->
        <el-table-column :label="$t('table.tableName')" prop="tableName" show-overflow-tooltip />
		   <el-table-column :label="$t('table.tableComment')" prop="tableComment" show-overflow-tooltip />
        <el-table-column :label="$t('common.action')" width="250">
          <template #default="scope">
            <el-button icon="Refresh" @click="syncTable([scope.row.tableName])" text type="primary">
            {{ $t('gen.syncBtn') }}
          </el-button>
          <el-button icon="edit-pen" @click="formDialogRef.openDialog(state.queryForm.dsName,scope.row.tableName)" text type="primary" 
            >{{ $t('common.detailBtn') }}
          </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
  </el-dialog>

  <!-- 查看明细  -->
  <form-dialog ref="formDialogRef" />
</template>

<script setup lang="ts" name="syncDataBaseTableDialog">
import { BasicTableProps,useTable } from '/@/hooks/table';
import { list } from '/@/api/gen/datasource';
import { useListTableApi, useTableApi } from '/@/api/gen/table';
import { useI18n } from 'vue-i18n';

const emit=defineEmits(['refresh']);
const { t } = useI18n();
const FormDialog = defineAsyncComponent(()=>import('./tableColumns.vue'));
const formDialogRef = ref();
//属性
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    dsName: '',
    tableName:'',
  },
  pageList: useListTableApi,
  createdIsNeed:false
});
//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

const visible=ref(false);
//多选属性
const selectObjs = ref([]) as any;
const multiple = ref(true);
//数据源
const datasourceList = ref();
//初始化加载数据源信息
onMounted(() => {
  list().then(res => {
    datasourceList.value = res.data;
    if (datasourceList.value.length>0) {
      state.queryForm.dsName = datasourceList.value[0].name;
    }
  });
});

//多选
const handleSelectionChange = (objs: {tableName:string}[]) => {
  selectObjs.value = objs.map((tableName) => tableName);
  multiple.value = !objs.length;
};
//同步表方法
const syncTable = (tableNames:string[]) => { 
  let dsName = state.queryForm.dsName;
  if (tableNames.length>0) {
    for (let tableName of tableNames){
      useTableApi(dsName,tableName).then(res => {
        emit('refresh');
      });
    }
  }

};
// 打开弹窗
const openDialog = () => {
  visible.value = true;
  let dsName = 'master';
  state.queryForm.dsName = dsName;
  getDataList();
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>